<template lang="pug">
.top-menutasks_box
  //- .top-arrow
  ul.top-menutasks
    TaskTab(:tabList="tabList"
      :initIndex="tabIndex")
      .tag-item(slot="message")
        TaskItem.task-content(v-for="msg in messageData"
          v-bind="msg"
          :key="msg.id"
          :relation="taskRelation")
        li(v-if="messageData.length === 0")
          .top-menutasks__notask 当前没有通知
        li.bottom-tip.center()
          router-link(to="/workFlow") 查看全部
          a(href="#" @click="clearAll") 清空
      .tag-item(slot="task")
        TaskItem.task-content(v-for="task in taskData"
          v-bind="task"
          :key="task.id"
          :relation="taskRelation")
        li(v-if="taskData.length === 0")
          .top-menutasks__notask 当前没有待办工单
        li.bottom-tip.center()
          a.link-style(@click="linkToTodo") 查看全部
      .tag-item(slot="taskDone")
        TaskItem.task-content(v-for="taskDone in taskDoneData"
          v-bind="taskDone"
          :key="taskDone.id"
          :relation="taskRelation")
        li(v-if="taskDoneData.length === 0")
          .top-menutasks__notask 当前没有已办工单
        li.bottom-tip.center()
          a.link-style(@click="linkToDone") 查看全部
</template>
<script>
/**
* @author 林墁霓
* @desc toolbar顶部消息弹出框
*/
import TaskItem from './TaskItem'
import Tab from '@/components/Tab'
import TaskTab from './TaskTab'
export default {
  name: 'TaskList',
  components: {
    TaskItem,
    TaskTab,
    Tab
  },
  props: {
    taskDoneData: {
      type: Array,
      default: () => []
    }, // 已办
    taskData: {
      type: Array,
      default: () => []
    }, // 待办
    msgData: {
      type: Array,
      default: () => []
    }, // 消息通知
    taskRelation: {
      type: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      // tabList: [{name: 'message', label: `通知(${this.msgData.length})`},
      tabList: [{name: 'task', label: `待办(${this.taskData.length})`},
        {name: 'taskDone', label: `已办(${this.taskDoneData.length})`}],
      messageData: this.msgData, // 通知
      // taskData: [], // 待办
      // taskRelation: {},
      tabIndex: 0
    }
  },
  methods: {
    clearAll () {
      // this.taskData = []
    },
    linkToTodo () {
      window.location.href = '/system/#/workFlow?state=doingList'
    },
    linkToDone () {
      window.location.href = '/system/#/workFlow?state=doneList'
    }
  }
}
</script>
<style scoped lang="sass">
.top-menutasks_box
  z
.top-arrow
  position: absolute
  top: 12px
  right: 0
  background: #fff
  width: 10px
  height: 10px
  transform: rotate(45deg)
  display: block
  border-color: transparent
  border-style: solid
  box-shadow: 0px 0px 4px #ddd
.top-menutasks
  width: 280px
  box-sizing: border-box
  max-height: 400px
  overflow: auto
  list-style: none
  /* padding: 0 15px 0 20px */
  position: absolute
  // top: 18px
  top: 0
  right: -20px
  background: #fff
  box-shadow: 0px 0px 4px #ddd, 0px 0px 4px -4px #ddd
  border-radius: 5px
  .tag-item
    >li
      padding: 5px 0
      border-bottom: 1px solid #e8e8e8
      li>&:nth-last-of-type(1)
        border-bottom: 0px
      a
        display: block
        font-size: 14px
        color: #999
        text-decoration: none
      b
        font-size: 12px
        margin-left: 5px
      .link-style
        cursor: pointer
    .task-content
      margin: 0 15px
  .top-tip, .bottom-tip
    padding: 0
    display: flex
    justify-content: space-around
  .top-tip
    top: 0
  .top-menutasks__notask
    font-size: 14px
    color: #aaa
    text-align: center
  .center
    text-align: center
</style>
